<template>
  <div class="screen">
    <!-- 数据大屏 -->
    <div class="content" ref="content">
      <div class="top">
        <Top></Top>
      </div>
      <div class="bottom">
        <div class="left">
          <Tourist></Tourist>
          <Sex></Sex>
          <Age></Age>
        </div>
        <div class="center">
          <Earth></Earth>
          <Line></Line>
        </div>
        <div class="right">
          <Rank></Rank>
          <Year></Year>
          <Count></Count>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Top from '@/views/screen/top/index.vue'
import Tourist from '@/views/screen/left/tourist.vue';
import Sex from '@/views/screen/left/sex.vue';
import Age from '@/views/screen/left/age.vue';
import Rank from '@/views/screen/right/rank.vue';
import Year from '@/views/screen/right/year.vue';
import Count from '@/views/screen/right/count.vue';
import Earth from '@/views/screen/center/earth.vue';
import Line from '@/views/screen/center/line.vue';


const content = ref()   // const content = document.querySelector('.content')
onMounted(() => {
  content.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})
const getScale = (w = 1920, h = 1080) => {
  const ww = window.innerWidth / w
  const wh = window.innerHeight / h
  return ww < wh ? ww : wh
}

window.onresize = () => {
  content.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<style lang="scss" scoped>
.screen {
  width: 100vw;
  height: 100vh;
  background: url(@/views//screen/images/bg.png) no-repeat;
  background-size: cover;

  .content {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 1080px;
    transform-origin: left top;

    .top {
      width: 100%;
      height: 75px;
    }

    .bottom {
      height: 1040px;
      display: flex;

      // background-color: brown;
      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .center {
        flex: 2;
        display: flex;
        flex-direction: column;
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
